<?php

namespace july\julyadmin\builder\forms;

use july\julyadmin\builder\FormBase;

/**
 * 图标选择组件
 */
class IconPicker extends FormBase
{
    /**
     * 添加组件
     * @Author
     * @DateTime 2023-07-16T12:14:26+0800
     * @param    string                   $field 字段
     * @param    string                   $label 名称
     * @return this
     */
    public function __construct($field = '', $label = '')
    {
        $form           = new \stdClass();
        $form->type     = 'icon-picker';
        $form->field    = $field;
        $form->label    = $label;
        $form->help     = '';
        $form->tips     = ['tips' => '', 'direction' => 2, 'time' => 0, 'background' => '#000000'];
        $form->required = false;

        //内容
        $form->value   = '';
        $form->default = '';
        $this->form    = $form;

        $this->js = '
        <script type="text/javascript" src="/static/assets/admin/js/fontIconPicker/jquery.fonticonpicker.min.js"></script>
        ';
        $this->css = '
        <link rel="stylesheet" type="text/css" href="/static/assets/admin/js/fontIconPicker/css/jquery.fonticonpicker.min.css">
        <link rel="stylesheet" type="text/css" href="/static/assets/admin/js/fontIconPicker/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css" />
        ';
        return $this;
    }

    /**
     * 渲染组件
     * @Author
     * @DateTime 2023-07-16T12:22:46+0800
     * @return   array
     */
    public function render($items_field = '')
    {
        if ($items_field) {
            $this->html        = '';
            $this->script      = '';
            $this->form->value = '';
        }
        $this->form->value = $this->form->default;
        if (isset($this->data[$this->form->field]) && $this->data[$this->form->field] !== "") {
            $this->form->value = $this->data[$this->form->field];
        }

        $required_html = $this->form->required && !$this->isView ? ' <font style="color:red;font-weight:bold;font-size:20px;vertical-align:-webkit-baseline-middle;">*</font>' : '';

        //处理tips
        $tips = '';
        if ($this->form->tips['tips']) {
            $tips = '<font class="form-tips-icon"><i class="mdi mdi-information-outline" tips="' . $this->form->tips['tips'] . '" direction="' . $this->form->tips['direction'] . '" time="' . $this->form->tips['time'] . '" background="' . $this->form->tips['background'] . '" onclick="showTips(this)"></i></font>';
        }

        $this->html .= <<< EOT

        <div class="row ps-0 pe-0 ms-0 me-0 mt-3 mb-3 col-md-{$this->colWidth}">
            <label class="col-sm-{$this->labelWidth} col-form-label pe-2 col-form-label-sm text-sm-end text-md-end text-lg-end text-xl-end">
                {$tips}{$this->form->label}
                {$required_html}
            </label>
EOT;
        $input_html = "";
        $disabled   = $this->readonly ? 'disabled' : '';
        if (!$this->isView) {
            $input_html .= '<input type="text" class="form-control" id="form-' . $items_field . $this->form->field . $this->items_row_id_template_fun . '" name="' . $this->items_row_prefix . $this->form->field . '"  value="' . $this->form->value . '" ' . ($this->form->required ? ' required' : '') . $this->readonly . ' ' . $disabled . '/>';
        } else {
            $input_html .= '<font class="d-flex align-items-center h-100">';
            $input_html .= $this->form->value !== '' ? '<i style="line-height:33px;" class="' . $this->form->value . '"></i>' : '空';
            $input_html .= '</font>';
            
        }

        //处理help
        if ($this->form->help && !$this->isView) {
            $input_html .= <<<EOT

            <div class="form-help form-text">
                <i class="mdi mdi-information-outline"></i>
                <font>{$this->form->help}</font>
            </div>
EOT;
        }

        $this->html .= <<< EOT

            <div class="col-sm-{$this->inputWidth}">
                {$input_html}
            </div>
        </div>
EOT;
        if (!$this->readonly) {
            $this->script .= <<<EOT

            <script type="text/javascript">
                jQuery(document).ready(function($) {
                    //这里要做判断，如果是要放到items组件的话这里必须要写，不然放在items中会出现两个
                    var field = '{$this->items_row_id_template_fun}';
                    if(field.indexOf('_____')>-1){
                        return false;
                    }


                    var font_element = $('#form-{$items_field}{$this->form->field}{$this->items_row_id_template_fun}').fontIconPicker({
                        theme: 'fip-bootstrap'
                    });

                    $.ajax({
                        url: '/static/assets/admin/js/fontIconPicker/fontjson/materialdesignicons.json',
                        type: 'GET',
                        dataType: 'json'
                    }).done(function(response) {

                        var fontello_json_icons = [];

                        $.each(response.glyphs, function(i, v) {
                            fontello_json_icons.push( v.css );
                        });

                        font_element.setIcons(fontello_json_icons);
                    }).fail(function() {
                        console.error('字体图标配置加载失败');
                    });

                    $(document).on('change', '#form-{$items_field}{$this->form->field}{$this->items_row_id_template_fun}', function(){
                        $('#show-mdi').html($(this).val());
                    });
                });
            </script>

EOT;

        }
        $result = ['html' => $this->html, 'script' => $this->script, 'js' => $this->js, 'css' => $this->css];
        return $result;
    }
}
